<template>
  <div class="departments-container">
    <!-- 提前定义好的一个类名, 提供的一些padding -->
    <div class="app-container">
      <!--
        el-card  带有阴影,内外边距的盒子

        el-row   一行
        el-col   一列  :span="8"  一行是24份    width: 33.33%
        默认采用的浮动, 浮动的话 如果在宽度不够的前提下, 会掉下来
       -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- root表示 是否是根节点 最大的节点 -->
        <!-- 布尔类型的属性 如果你给了 其实就是true -->
        <TreeTools :node-data="company" :root="true" @add-depts="addDeptsFn" />

        <!-- 放一棵树(组织架构) -->
        <!-- default-expand-all 布尔值; <input type="radio" checked /> -->
        <!--
          el-tree组件
           data  提供树形数据
           props  提供一个对象,设置获取信息的字段名
           default-expand-all 提供一个布尔值, 用于展开所有节点
         -->
        <!--
           el-tree组件默认展示的结构只有文字描述, 但是我们希望将来能够往里面放负责人, 下拉菜单(结构)
           => 希望用别人组件的时候,传递自己的结构
           ==> 插槽
          -->
        <!--
            <el-tree></el-tree>
            内部一定是有一个<slot name="default" :node="xxx" :data="xxxx"></slot>
            内部会将绑在插槽上的数据收集到一个对象中来 { node: 'xxx', data: 'xxxxx' } ==> obj => obj.data
           -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- tree子节点的宽度默认由内容撑开!!! -->
          <template #default="{data}">
            <!-- <p>{{ data.name }} - {{ data.manager }}</p> -->
            <TreeTools
              :node-data="data"
              @add-depts="addDeptsFn"
              @del-depts="getDepartments"
              @edit-depts="editDeptsFn"
            />
          </template>
        </el-tree>

        <!-- <el-tree :data="list" :default-expand-all="true" /> -->
      </el-card>

      <!-- 添加部门的对话框 -->
      <AddDept
        ref="addDept"
        :node-data="nodeData"
        :dept-list="deptList"
        :dialog-show.sync="dialogShow"
        @add-dept="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
import { reqGetDepartments } from '@/api/departments'
import { transListToTreeData } from '@/utils'
import hello from '@/mixins/hello'

export default {
  // 设置调试工具里的组件名, 方便快速定位组件调试代码
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  mixins: [hello],

  data() {
    return {
      // 树形数据 [{} ,{} ,{}]
      // 一个对象就是一个树形节点, label属性设置文字描述, children 设置孩子节点
      // 一个节点就是一个对象, 一定会有一个label属性进行文字描述, 将来有孩子节点才有children属性(一定是[])

      // el-tree组件是支持文字描述字段名label 和 孩子节点字段名children 的自定义
      departs: [], // 树形数据
      deptList: [], // 列表数据
      defaultProps: {
        // 设置组件将来获取文字描述的字段名
        label: 'name',
        // 设置组件将来获取孩子节点的字段名
        children: 'children'
      },
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      dialogShow: false, // 控制对话框的显示隐藏
      nodeData: {}, // 保留将来新增子部门时的父级部门数据  /  如果是编辑操作, 此时村这个数据是为了将来能够修改自己的部门信息
      loading: false // 控制loading加载
    }
  },
  created() {
    // console.log('你好, 我是一个新页面')
    this.getDepartments()
  },
  methods: {
    // 先行封装, 因为将来会进行多次调用..
    async getDepartments() {
      this.loading = true

      // 希望在一个异步操作结束以后做某件, => promise
      // await new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     resolve()
      //   }, 2000)
      // })

      // 部门列表数据不需要存在仓库中, 自己的数组自己用
      const { data: { depts, companyName }} = await reqGetDepartments()
      // 把后端返回的列表数据 也存一分
      this.deptList = depts
      // console.log(transListToTreeData(depts, '604e2251b205b95968e1312c'))
      this.company.name = companyName
      this.company.id = '' // 为了以后能正常校验 新增一级部门时 名称重复的问题
      this.departs = transListToTreeData(depts, '')

      this.loading = false
    },
    // closeDialogFn(flag) {
    //   this.dialogShow = flag
    // },
    addDeptsFn(nodeData) {
      // 一下这个代码执行结束, 弹窗要显示了..
      this.dialogShow = true
      // 可以发请求了...  我很想去触发子组件的一个方法  => 我很想拿到子组件 => ref $refs
      // this.$refs.form.validate() // 表单的整体校验
      // this.getSimpleUserList()
      // this.$refs.addDept.getSimpleUserList()

      // console.log(nodeData)
      this.nodeData = nodeData
      // ref和$refs => 获取组件 => 获取组件身上的数据 方法...  this.xx this.fn()
      // this.$refs.addDept.showTitle = '添加子部门'
    },
    editDeptsFn(nodeData) {
      // 传过来给自己编辑用的
      console.log('用户点了编辑, 此时传过来的nodeData', nodeData)
      this.nodeData = nodeData
      this.dialogShow = true
      // this.$refs.addDept.showTitle = '编辑部门'
      // 这段代码一旦执行, 表示就是编辑操作 => 希望在点编辑时, 获取该部门详情
      this.$refs.addDept.getDepartDetail(nodeData.id)
    }
    // fn() {
    //   this.getDepartments()
    // }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
